<script src="../router/index.js"></script>
<template>
  <div>
    <el-container>
        <el-header>
             <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">书城后台</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col>
              <el-menu
                default-active="1-1"
                class="el-menu-vertical-demo"
                :router="true"
                @open="handleOpen"
                @close="handleClose">
                <el-submenu index="1">
                  <template #title>
                    <i class="el-icon-location"></i>
                    <span>人事管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1" route="/main/user">用户</el-menu-item>
                    <el-menu-item index="1-1" route="/main/record">员工</el-menu-item>
                    <el-menu-item index="1-1" route="/main/region">角色</el-menu-item>
                   </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                  <template #title>
                    <i class="el-icon-location"></i>
                    <span>商品管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1" route="/main/address">图书</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                  <template #title>
                    <i class="el-icon-location"></i>
                    <span>采购管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1" route="/main/address">采购</el-menu-item>
                    <el-menu-item index="1-1" route="/main/record">库存</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                  <template #title>
                    <i class="el-icon-location"></i>
                    <span>订单管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1" route="/main/address">订单表</el-menu-item>
                    <el-menu-item index="1-1" route="/main/record">订单详表</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                  <template #title>
                    <i class="el-icon-location"></i>
                    <span>菜单管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1" route="/main/address">菜单详情</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                  <template #title>
                    <i class="el-icon-location"></i>
                    <span>活动管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1" route="/main/address">活动中心</el-menu-item>
                    <el-menu-item index="1-1" route="/main/record">活动详情</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-container>
          <el-main>
            <router-view/>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Main',
    data(){
      return{
          logFormVisible: false,

      }
    },
  methods: {
      handleCommand(param){
          switch (param){
              case "logout":
                  this.$message({
                      showClose: true,
                      message: '退出成功',
                      type: 'success'
                  });

                  //路由跳转
                  this.$router.push({path:'/'});
                  break;
          }
          }
      ,
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
      handleSelect(key, keyPath) {
          console.log(key, keyPath);
      }
  }

}
</script>

<style scoped>

</style>
